<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            font-family: 'microsoft yahei';
        }
        
        .wp {
            width: 600px;
            margin: 50px auto;
        }
        
        .wp>p {
            margin: 30px 0;
        }
        
        .wp>p>span {
            border: 1px solid #999;
            padding: 8px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }
        
        .wp>p>span.on {
            border: 2px solid #f60;
            padding: 7px;
            background-image: url(img/on.png);
            background-repeat: no-repeat;
            background-position: right bottom;
        }
    </style>
</head>

<body>

    <div class="wp">
        <p>
            <label>型号</label>
            <span data-type="1" class="on">4.7英寸</span>
            <span data-type="2">5.5英寸</span>
        </p>
        <p>
            <label>颜色</label>
            <span class="on">银色</span>
            <span>金色</span>
            <span>深空灰色</span>
        </p>
        <p>
            <label>内存</label>
            <span data-mem="3" class="on">16GB</span>
            <span data-mem="4">64GB</span>
            <span data-mem="5">128GB</span>
        </p>
        <p>
            <label>版本</label>
            <span class="on">公开版</span>
            <span>移动赠费版</span>
            <span>联通合约版</span>
        </p>
        <hr>
        <div>
            <span>价格</span>
            <span id="pSpan">&yen; 10.00</span>
        </div>
    </div>

    <script src="../jQuery库/jquery-3.1.0.js"></script>


    <script>
        var price = {
            3: 10,
            4: 20,
            5: 30,
            6: 40,
            8: 50,
            10: 60
        };


        $("p>span").on("click", function() {
            $(this).addClass("on").siblings().removeClass("on");
            let type = $(".wp").find("span.on[data-type]").attr("data-type");
            let mem = $(".wp").find("span.on[data-mem]").attr("data-mem");
            $("#pSpan").html(`￥${price[type*mem]}`)
        })
    </script>

</body>

</html>